<!DOCTYPE>
<html>
<head>
<title></title>
<link href="css/jquery-ui-1.8.21.custom.css" rel="stylesheet" />
<link href="css/main.css" rel="stylesheet" />
</head>
<body style="background:#00BBE3;" onselectstart="return false;">
<header>
  <div class="copper-title">Clocknotes</div>
  <div>
    <div style="display:inline-block;border-radius:10px;padding:0 10px;margin-right:10px;background:rgba(255,255,255,0.2);">
      <span id="clockBtn" style="margin-right:10px;cursor:pointer;color:white;">Clock</span>
      <span id="scheduleBtn" style="cursor:pointer;">Schedule</span>
    </div>
    <input type="hidden" id="calendarInput" dateFormat="Ymd">
    <input type="button" id="calendarBtn" value="Calendar" style="display:none;">
    <input type="button" id="toDoListBtn" value="To do">
  </div>
</header><div id="clockContainer"></div>
<div id="scheduleContainer"><div class="schedule-frame"></div></div>
<div id="toDoList">
  <div class="copper-todo-frame">
      <div class="copper-todo-header">
        <div style="float:left;">To do list</div>
        <div id="arrangeBtn" style="float:right;cursor:pointer;">Arrange</div>
        <div class="clear-all"></div>
      </div>
      <div class="copper-todo-body"><ul></ul></div>
      <div class="copper-todo-footer">
        <div class="clear-all" style="width:100%;text-align:center;">
            <div class="copper-todo-pinch"></div>
        </div>
      </div>
  </div>
</div>
<div id="formContainer" style="">
  <div class="form-title">
    <div>Adding an event</div>
  </div>
  <div class="form-body">
    <form>
    <input type="hidden" name="taskId">
    <table>
      <tr>
        <td>Start time:</td>
        <td id="startTimeCell"><input type="text" name="startTime"></td>
      </tr>
      <tr>
        <td>End time:</td>
        <td><input type="text" name="endTime"></td>
      </tr>
      <tr id="contentRow">
        <td>Content:</td>
        <td><textarea cols="40" rows="3" name="content"></textarea>
      </tr>
      <tr>
        <td>Alarm before:</td>
        <td>
          <select name="alarmBefore">
            <option value="-1">never</option>
            <option value="5" selected>5min</option>
            <option value="10">10min</option>
            <option value="15">15min</option>
            <option value="20">20min</option>
            <option value="30">30min</option>
          </select>
        </td>
      </tr>
      <tr>
        <td colSpan="2" style="text-align:right;">
          <input type="button" value="OK" class="primary-btn">
          <input type="button" value="Cancel" class="secondary-btn">
        </td>
      </tr>
    </table>
    </form>
  </div>
  <div class="form-tail">
      <div>Mon,Dec 24</div>
      <div>09:25</div>
      <div>PM</div>
      <div style="margin-top:100px;">
          <input type="button" value="OK" class="primary-btn">
          <input type="button" value="Cancel" class="secondary-btn">
      </div>
  </div>
</div>
<div id="calendarContainer"></div>
<div id="screenMask"></div>
</body>
<script src="js/jquery-1.7.1.js"></script>
<script src="js/jquery-ui-1.8.21.custom.min.js"></script>
<script src="js/jquery.dateformat.js"></script>
<script src='js/kinetic-v3.8.4.js'></script>
<script src='js/Setting.js'></script>
<script src='js/TaskRing.js'></script>
<script src='js/TaskBubble.js'></script>
<script src='js/Task.js'></script>
<script src='js/TaskManager.js'></script>
<script src='js/ToDoList.js'></script>
<script src='js/DaySchedule.js'></script>
<script src='js/TaskSchedule.js'></script>
<script src='js/TaskForm.js'></script>
<script src='js/TimeRegulator.js'></script>
<script src='js/DummyLayer.js'></script>
<script src='js/main.js'></script>
</html>